//------------------切换两个盒子----------------------
//点击登录的盒子里面的a
$('.box a').on('click', function () {
  $(this).parents('.box').hide().siblings('.box').show()
})

//layer是唯一不用加载能够直接使用的模块，弹层组件
let layer =layui.layer
// ----------------------   注册功能  ----------------------
// 表单提交 -> 阻止默认行为 -> 收集表单数据（查询字符串） -> ajax提交
$('.register form').on('submit', function (e) {
  e.preventDefault()
  // 收集表单数据
  
  let data = $(this).serialize()
  console.log(data);
  $.ajax({
    type: 'POST',
    url: '/api/reguser',
    data:data,
    success: function (res) {
      // 提示了一下，无论成功还是失败都得提示
     
      
      // 如果成功了，清空输入框，切换道登录页面
      if (res.status == 0) {
        layer.msg(res.message, {
          time:500
        }, function () {
          $('.register form')[0].reset() //清空输入框，重新定义
        $('.login').show().siblings('.box').hide()
        }) 
      } else { layer.msg(res.message) }

      
    }
  })
})

//------------------自定义验证规则----------------------
// 1.加载from模块
let form = layui.form

form.verify({
  // 键：对
  // 值验证的办法有两种写法，一种是数组，一种是函数
  // 1，数组的写法
  // user:['正则表达式'，'验证不通过时提示']
  user:[/^\w{2,10}$/,'用户名必须是2到10位'], // \w表示2-10位长度，是[2,10]不能有空格
  pass:[/^\S{6,12}$/,'密码必须是6到12位'], // \S表示除了空白的其它字符
  same: function (abc) {
    //abc 表示使用该验证规则的输入框的值(案例中确认密码使用这个规则)
    //return 是验证不通过时的提示
    if ($('.pwd').val() !== abc) {
      return '两次密码不一致'
    }
  }

})


//------------------登录功能----------------------
$('.login form').on('submit', function (e) {
  e.preventDefault()
  $.ajax({
    type: 'POST',
    url: '/api/login',
    data: $(this).serialize(),
    success: function (res) {
      
      if (res.status === 0) {
        layer.msg(res.message, {
          time:500
        }, function () {
          console.log(res);
          //存储服务器返回的token
          localStorage.setItem('token',res.token)
           location.href='./index.html'
         
        }) 
      } else { layer.msg(res.message) }
    }
    
  })
})

